<template>
  <div style="width: 100%;height: 100%;">
    <el-container style="width: 100%;height: 100%;position: relative">
      <el-aside width="15%">
        <el-page-header @back="goBack" content="编辑问卷" class="page_header">
        </el-page-header>
        <el-button type="primary" class="add_btn" @click="dialogFormVisible = true" :disabled="btn_is_disable">新建问卷
        </el-button>
        <br>
        <!-- :disabled="btn_is_disable"-->
        <el-button class="add_btn" @click="dialogFormVisible2 = true" :disabled="!btn_is_disable">添加简答题</el-button>
        <el-button class="add_btn" @click="dialogFormVisible3 = true" :disabled="!btn_is_disable">添加投票</el-button>
        <el-button class="add_btn" @click="dialogFormVisible4 = true" :disabled="!btn_is_disable">修改结束时间</el-button>
      </el-aside>
      <el-main>
        <el-alert
            title="还没创建问卷"
            type="warning"
            effect="dark"
            v-if="this.$store.state.paper.id ==0"
        >
        </el-alert>
        <paperC ref="paperC" v-if="this.$store.state.paper.id !='0'"></paperC>
      </el-main>
    </el-container>
    <!--创建问卷弹窗-->
    <el-dialog title="创建新问卷" :visible.sync="dialogFormVisible" width="630px">
      <el-form :model="form" :disabled="form_flag">
        <el-form-item label="问卷标题" :label-width="formLabelWidth">
          <el-input v-model="form.theme" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="问卷描述" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="结束日期" :label-width="formLabelWidth">
          <el-date-picker
              v-model="form.overTime"
              type="datetime"
              placeholder="选择结束日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="类型选择" :label-width="formLabelWidth">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.msg"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择封面" :label-width="formLabelWidth">
          <el-upload
              ref="upload"
              class="upload-demo"
              drag
              action="http://localhost:8081/question/add"
              :multiple="false"
              name="file"
              :limit="1"
              :data="this.form"
              :on-progress="up_ing"
              :on-error="up_Error"
              :on-success="up_success"
              :headers="this.headers"
              :auto-upload="false"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">上传图片或者视频作为问卷封面，且不超过100MB</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button @click="resetForm">重置</el-button>
        <el-button type="primary" @click="uploadFile()">创建问卷</el-button>
      </div>
    </el-dialog>
    <!--添加简答题题目弹窗-->
    <el-dialog title="添加简答题" :visible.sync="dialogFormVisible2" width="600px">
      <el-form :model="this.form_JdTopic" ref="form">
        <el-form-item label="题目" :label-width="formLabelWidth">
          <el-input v-model="form_JdTopic.title" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit2">确 定</el-button>

      </div>
    </el-dialog>

    <!--添加投票题目弹窗-->
    <el-dialog title="添加投票" :visible.sync="dialogFormVisible3" width="600px">
      <el-form :model="this.form_TpTopic" ref="form" :rules="rules">
        <el-form-item label="问卷标题" :label-width="formLabelWidth">
          <el-input v-model="form_TpTopic.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <el-radio v-model="form_TpTopic.answerType" label="1">单选题</el-radio>
          <el-radio v-model="form_TpTopic.answerType" label="2">多选题</el-radio>
        </el-form-item>
        <el-form-item label="添加选项" :label-width="formLabelWidth">
          <el-input-number v-model="form_TpTopic.answer_numb" @change="handleChange" :min="2" :max="7"
                           label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item :label="'选项:'+item" :label-width="formLabelWidth" v-for="item in form_TpTopic.answer_numb"
                      :key="item">
          <el-input
              v-model="form_TpTopic.answer[item-1]"
              type="textarea"
              autosize
              placeholder="请输入内容"
              style="width: 80%"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit3">确 定</el-button>
      </div>
<!--      修改结束时间-->
    </el-dialog>
    <el-dialog title="修改问卷结束时间" :visible.sync="dialogFormVisible4" width="30%">
      <el-form :model="question">
        <el-form-item label="问卷结束时间" >
          <el-date-picker
              v-model="question.overTime"
              align="right"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEditTime">取 消</el-button>
        <el-button type="primary" @click="editOverTime" >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import paperC from '../components/paper.vue'

export default {

  name: "addnew",
  components: {
    "paperC": paperC,
  },
  data() {
    return {
      rules:{},
      headers: {
        Authorization: window.sessionStorage.getItem('token')
      },
      form_flag: false,
      //创建成功返回给子页面
      paperX: {
        paperId: '',
        paperTheme: ''
      },
      form_JdTopic: {
        questionId: '',
        title: '',
      },
      form_TpTopic: {
        questionId: '',
        answer_numb: '',
        answerType: '1',
        answer: [],
        title: '',
      },
      btn_is_disable: false,
      //类型列表
      options: [{}],
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      question:{},
      form: {
        userId: this.$store.state.userId,
        theme: '',
        content: '',
        type: '',
        overTime: '',
      },
      formLabelWidth: '120px',

    }

  },
  methods: {
    uploadFile() {
      this.$refs.upload.submit();
    },
    handleChange(value) {
      console.log(value);
    },
    resetJdFrom() {
      this.$refs.paperC.refreshData();
      this.form_JdTopic = {
        questionId: this.paperX.paperId,
        title: '',
      }
    },
    resetForm() {
      this.$refs.paperC.refreshData();
      this.form = {
        userId: this.$store.state.userId,
        theme: '',
        content: '',
        type: '',
        overTime: '',
      }
    },
    resetTpFrom() {
      this.$refs.paperC.refreshData();
      this.form_TpTopic = {
        questionId: this.paperX.paperId,
        answer_numb: '',
        answerType: '1',
        answer: [],
        title: '',
      }
    },
    up_ing() {
      this.form_flag = true;
    }
    ,
    //图片上传成功
    up_success(response, file, fileList) {
      //打印内容
      console.dir(response, {depth: null});
      console.log("id:" + response.data.question_id);
      if (response.flag == true) {
        this.dialogFormVisible = false;
        this.form_flag = false;
        this.btn_is_disable = true;
        this.paperX.paperId = response.data.question_id;
        this.$store.state.paper.id = this.paperX.paperId;
        this.$refs.paperC.refreshData();
        this.paperX.paperTheme = this.form.theme;
        this.$messageBox("问卷创建成功!", "提示", "info");

        this.resetForm();
      } else {
        this.$messageBox("问卷创建失败!", "提示", "info");
        this.resetForm();
      }

    },
    up_Error(err, file, fileList) {

      this.$messageBox("问卷创建失败!" + err, "提示", "info");
      this.resetForm();
    },
    goBack() {
      this.$router.go(-1);
    },
    //创建题目提交
    onSubmit2() {
      this.form_JdTopic.questionId = this.paperX.paperId;
      this.$http.post('/topic/addTopic', this.form_JdTopic).then(resp => {
        this.btn_is_disable = true;
        if (resp.flag == true) {

          this.$notify({
            title: '提示',
            message: '题目添加成功!',
            type: 'success'
          });
          this.resetJdFrom();
          this.dialogFormVisible2 = false;
        } else {
          this.$messageBox("问卷创建失败!", "提示", "info");
        }
      })
    },
    onSubmit3() {
      this.dialogFormVisible3 = false;
      this.form_TpTopic.questionId = this.paperX.paperId;
      this.$http.post('/topic/addTopic', this.form_TpTopic).then(resp => {
        this.btn_is_disable = true;
        if (resp.flag == true) {
          this.paperX.paperTheme = this.form.theme;
          this.resetTpFrom();
          this.$notify({
            title: '提示',
            message: '问卷创建成功',
            type: 'success'
          });
        } else {
          this.$messageBox("问卷创建失败!", "提示", "info");
        }
      })
    },
    getUpdateQuestion(){
      this.$http.post("question/findQuestionById/"+this.$store.state.paper.id).then(resp => {
        if (resp.flag) {
          this.question=resp.data;
        }
      })
    },
    cancelEditTime(){
      this.dialogFormVisible4=false;
      this.getUpdateQuestion();
    },
    editOverTime(){
      this.dialogFormVisible4=false;
      this.$http.post("question/editQuestion",this.question).then(resp => {
        if (resp.flag) {
          this.$message.success("问卷结束时间修改成功");
          console.log(resp);
        }else{
          this.$message.error("修改结束时间失败")
        }
      })
    }
  },
  //实例被创建后的钩子函数
  created() {
    this.$http.get('/type/all', null).then(resp => {
      console.log("flag" + resp.flag)
      if (resp.flag == true) {
        this.options = resp.data;
      } else {
        this.$message("数据初始化失败")
      }
    })
    if (this.$store.state.paper.id != '1' && this.$store.state.paper.id != '') {
      this.btn_is_disable = true;
      this.paperX.paperId = this.form_JdTopic.questionId = this.form_TpTopic.questionId = this.$store.state.paper.id
    }
    this.getUpdateQuestion()
  },
  destroyed() {
    this.btn_is_disable = true
    this.$store.state.paper.id = ''
  }
}
</script>

<style lang="less" scoped>
.page_header {
  margin-left: 10px;
  margin-top: 10px;
}

.add_btn {
  margin-top: 40px;
  width: 80%;
}

.el-aside {
  position: relative;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
}

.el-main {
  position: relative;
  background: #EBEEF5;

}
</style>